<template>
  <view
    :style="{ padding, height: count > 1 ? '70rpx' : '80rpx' }"
    :class="['cc-button-group', `cc-button-group__${count}`]"
  >
    <slot></slot>
  </view>
</template>

<script>
/**
 * 按钮组
 */
export default {
  props: {
    count: {
      type: [String, Number],
      default: 2,
    },
    padding: {
      type: String,
      default: "0",
    },
  },
};
</script>

<style lang="scss">
// 这里布局使用flex会展示效果不一致，故使用inline-block
.cc-button-group {
  box-sizing: content-box;
  @for $i from 1 through 3 {
    &__#{$i} {
      $width: calc((100% - (30rpx * (#{$i} - 1))) / #{$i}) !important;
      %common {
        width: $width;
        display: inline-block;
        margin-right: 30rpx;
        &:last-child {
          margin-right: 0;
        }
      }
      // 按钮多于1个时，尺寸强制使用中等尺寸
      // %size {
      // 	height: 70rpx !important;
      // 	line-height: 70rpx !important;
      // 	font-size: 26rpx !important;
      // }

      /* #ifndef MP-WEIXIN */
      ::v-deep .u-btn {
        @extend %common;
        // @if $i > 1 {
        // 	@extend %size;
        // }
      }
      /* #endif */

      /* #ifdef MP-WEIXIN */
      w-button {
        @extend %common;
        button {
          width: 100% !important;
          display: inline-block !important;
          // @if $i > 1 {
          // 	@extend %size;
          // }
        }
      }
      /* #endif */
    }
  }
}
</style>
